<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-main>
      <el-scrollbar>
        <el-button @click="openCommodityCUDialog(0)">上架商品</el-button>
        <el-table :data="tableData">
          <el-table-column prop="id" label="商品编号" />
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="wdescribe" label="描述" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="shippingAddressId" label="发货地id" />
          <el-table-column prop="shopId" label="商店id" />
          <el-table-column prop="number" label="数量" />
          <el-table-column prop="enable" label="可用" />
          <el-table-column label="操作" width="280">
            <template #default="scope">
              <el-button @click="openCommodityCUDialog(scope.row.id)">编辑</el-button>
              <el-button @click="deleteComidity(scope.row.id)">删除</el-button>
              <el-button @click="changeEnable(scope.row.id)">上/下架</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
  </el-container>
  <commodity-c-u ref="commodityCURef" />
</template>
  
<script lang="ts" setup>
import { ref, toRaw } from 'vue'
import { getCommodityByShopId, deleteCommodityByIdAndJwt, changeCommodityEnableByIdAndJwt} from "../../api/commodity/"
import { ElContainer, ElMessage } from 'element-plus';
import CommodityCU from '../selleroperate/CommodityCU.vue';
import { useRouter } from 'vue-router'
const router = useRouter();

// 根据shopId获取店铺
let tableData = ref([])
const shopId = router.currentRoute.value.query.shopId;
if (shopId != null) {
  const CommodityByShopId = getCommodityByShopId({
    shopId: shopId
  })
  CommodityByShopId.then((res) => {
    if (res.code === 200) {
      tableData.value = res.data
    }
  })
} else {
  router.push({
    path: "/SellerOperate/Shop"
  })
}

// 打开创建地址页面
let commodityCURef = ref()
const openCommodityCUDialog = (address: number) => {
  //子组件方法
  commodityCURef.value.openDialog(address);
}

//删除商品
const deleteComidity = (id: number) => {
  const deleteCommodityByShopIdResult = deleteCommodityByIdAndJwt({
    shopId: shopId
  })
  deleteCommodityByShopIdResult.then((res) => {
    if (res.code === 200) {
      return ElMessage({
        showClose: true,
        message: "删除成功",
        type: 'success',
      })
    } else {
      return ElMessage({
        showClose: true,
        message: res.message,
        type: 'error',
      })
    }
  })
}

const changeEnable = (id:number) => {
  const changeCommodityEnableByIdAndJwtResult = changeCommodityEnableByIdAndJwt({
    id: id
  })
  changeCommodityEnableByIdAndJwtResult.then((res) => {
    if (res.code === 200) {
      return ElMessage({
        showClose: true,
        message: "上下架成功",
        type: 'success',
      })
    } else {
      return ElMessage({
        showClose: true,
        message: res.message,
        type: 'error',
      })
    }
  })
}

</script>
  
<style scoped></style>
  